// 创建vue实例
const { createApp } = Vue
const app = createApp({
  data() {
    return {
      heroList: [],
      query: {
        // query 对象用于定义查询参数或筛选条件   数据结构
        // 当 key: 'zonghe' 时：value 为 10 或 11
        // 当 key: 'dingwei' 时：value 为 0~6
        key: 'dingwei', // zonghe || dingwei
        value: 0, // 10,11 || 0~6
      },
      keyword: '',
      // 项目优化
      typeList: {
        zonghe: [
          { name: '本周免费', value: 10 },
          { name: '新手推荐', value: 11 },
        ],
        dingwei: [
          { name: '全部', value: 0 },
          { name: '坦克', value: 3 },
          { name: '战士', value: 1 },
          { name: '法师', value: 2 },
          { name: '刺客', value: 4 },
          { name: '射手', value: 5 },
          { name: '辅助', value: 6 },
        ],
      },
    }
  },
  computed: {
    //   heroImage：function(){
    //     return (value)=>{
    //       return `https://game.gtimg.cn/images/yxzj/img201606/heroimg/{value}/${value}.jpg`
    //     }
    //   }

    filterHeros() {
      const { key, value } = this.query
      const keyword = this.keyword
      if (keyword) {
        // 关键字搜索
        const res = this.heroList.filter((hero) => hero.cname.includes(keyword))
        // 深拷贝，不影响源数据
        const newRes = _.cloneDeep(res)
        newRes.map((hero) => {
          hero.cname = hero.cname.replace(
            keyword,
        // 字符串拼接的方式插入了 HTML 标签
            `<span style="color:red">${keyword}</span>`
          )
        // 确保 map 方法正确生成包含修改后对象的新数组
        // 将修改后的 hero 对象（包含高亮的 HTML 标签）放入新数组中。
        // 如果没有这个 return，map 会默认返回 undefined，导致新数组变成 [undefined, undefined, ...]。
          return hero
        })

        // 简洁写法
        // return _.cloneDeep(res).map((hero) => {
        //   hero.cname = hero.cname.replace(
        //     new RegExp(keyword, 'g'),
        //     `<span style="color:red">${keyword}</span>`
        //   )
        //   return hero
        // })
        return newRes
      } else {
        // 条件搜索
        if (key === 'zonghe') {
          // filter函数会遍历数组的每个元素，并调用传入的回调函数
          return this.heroList.filter((hero) => hero.pay_type == value) //10||11
        } else if (key === 'dingwei') {
          if (value === 0) {
            return this.heroList
          } else {
            return this.heroList.filter(
              (hero) => hero.hero_type == value || hero.hero_type2 == value
            ) //0-6
          }
        }
      }
    },
  },
  methods: {
    async getHeroList() {
      const { data } = await axios.get(
        'http://project.x-zd.net:3001/apis/herolist'
      )
      this.heroList = data.data
    },
    // 以下两个操作互斥
    // 条件查询
    changeType(type, value) {
      this.query.key = type
      this.query.value = value
      // 关键字被清空
      this.keyword = ''
    },
    // 关键字查询
    changeKeyword(event) {
      // 切换到全部
      this.query.key = 'dingwei'
      this.query.value = 0
      // 更新keyword
      this.keyword = event.target.value
    },
  },
  // mounted 生命周期函数
  mounted() {
    // 异步请求数据
    this.getHeroList()
  },
})
app.mount('#app')
